<template>
    <div class="orderlist">
        订单通知：<el-button @click="bindEmail()" type="primary">{{ isBindEmail ? '更改邮箱':'绑定邮箱'}}</el-button>
        <!-- 顶部查询导航 -->
    <div class="header">
        <el-form :inline="true" @submit.native.prevent>
            <el-form-item label="订单状态">
              <el-select v-model="orderQuery.state" placeholder="请选择">
                <el-option
                  v-for="item in orderStateOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="用户名称">
              <el-input v-model="orderQuery.userId"></el-input>
            </el-form-item>
            <el-form-item label="开始日期">
              <el-date-picker v-model="orderQuery.createBegin" type="date" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
            <el-form-item label="结束日期">
              <el-date-picker v-model="orderQuery.createEnd" type="date" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getAll()">全部记录</el-button>
          </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getOrderInfo()">查询</el-button>
              
              <el-button type="primary" @click="reset()">清空</el-button>
            </el-form-item>
        </el-form>
    </div>
    <!-- 数据显示 -->
    <div class="content">
        <el-table
        ref="multipleTable"
        :data="orderData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="70">
        </el-table-column>

        <el-table-column
          label="序号"
          width="100">
          <template slot-scope="scope">{{ (scope.$index+1)+(orderQuery.currentPage-1)*orderQuery.pageItems }}</template>
        </el-table-column>

        <el-table-column
          prop="id"
          label="订单编号"
          width="200">
        </el-table-column>

        <el-table-column
          prop="userId"
          label="客户"
          width="200">
        </el-table-column>

        <el-table-column
          label="订单商品"
          width="200">
          <template slot-scope="scope">
           {{ scope.row.shop }}
          </template>

        </el-table-column>

        <el-table-column
          prop="pay"
          label="订单价格"
          width="200">
        </el-table-column>
        
        <el-table-column
          prop="state"
          label="订单状态"
          width="200">
          <template slot-scope="scope">
          <el-select v-model="scope.row.state"  disabled placeholder="">
            <el-option
              v-for="item in orderStateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </template>
        </el-table-column>

        <el-table-column
          label="操作"
          width="200">
          <template slot-scope="scope">
            <el-select v-model="scope.row.state"  @change="updateState(scope.row.id,scope.row.state)" placeholder="">
              <el-option
                v-for="item in orderStateOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table>
      <el-button style="float:right" type="danger" @click="removes" plain>批量删除</el-button>
    </div>

    <!-- 底部分页导航 -->
    <div class="footer">
        <el-pagination style="magi"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="orderQuery.currentPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="orderQuery.pageItems"
        layout="total, sizes, prev, pager, next"
        :total="orderQuery.total">
        </el-pagination>
    </div>
    </div>
</template>
<script>
import system from '@/api/system'
import order from '@/api/order'
export default {
  data() {
    return {
      isBindEmail:false,
      orderQuery:{
        'state':'',
        'userId':'',
        'createBegin':'',
        'createEnd':'',
        'currentPage':'1',
        'pageItems':10, 
        'total':0, 
      },
      orderStateOptions: [{
          value: '0',
          label: '待支付'
        }, {
          value: '1',
          label: '待发货'
        }, {
          value: '2',
          label: '已发货'
        },{
          value: '3',
          label: '待收货'
        },{
          value: '4',
          label: '完成'
        },{
          value: '5',
          label: '取消'
        }],
      orderData:[]
    };
  },
  created() {
    this.isExistEmail();
  },
  methods: {
    async bindEmail(){
     var email = await this.$prompt('请输入邮箱', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z]{2,4})+$/,
          inputErrorMessage: '邮箱格式不正确'
        }).then(({ value }) => {
          return value;
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
          return ' ';       
        });
      if(email===' '){
        return;
      }
      system.bindEmail({'email':email,'id':'6699'})
        .then(res=>{
          this.$message({
            type: 'success',
            message: '绑定成功，订单将会发送到此邮件中'
          });  
        })
    },
    isExistEmail(){
      system.isBindEmail()
        .then(res=>{
          this.isBindEmail = res.data.isExist;
        })
    },
    updateState(id,state){
      var orderData={
        "id":id,
        "state":state
      };
      order.updateOrder(orderData)
        .then(res=>{
          this.$message({
            type: 'success',
            message: '修改状态成功'
          });
        })
    },
    getOrderInfo(){
      order.getOrderPages(this.orderQuery)
        .then(res=>{
          this.orderData = res.data.list;
          this.orderQuery.total=res.data.total;
        })
    },
    getAll(){
      this.orderQuery={
        'orderState':'',
        'userName':'',
        'createBegin':'',
        'createEnd':'',
        'currentPage':'1',
        'pageItems':10, 
        'total':0, 
        
      }
    },
    reset(){
      this.orderQuery={};
    }
  }
}
</script>
<style>
.orderlist{
    margin-left: 20px;
    width: 100%;
}
.header{
  margin-top: 20px;
  margin-bottom: 20px;
  float: left;
}
.content{
  float: left;
}
.footer{
  float: left;
  padding-left: 30%;
}
</style>